<template>
  <div style="padding: 10px">
    <!--    功能区域-->
    <div style="margin: 10px 0">

<!--      <el-button  type="primary" @click="add">新增</el-button>-->


    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="所有商品情况" name="first">
        <!--    搜索区域-->
        <div style="margin: 10px 0">
          <el-input placeholder="请输入关键字" style="width: 20%" v-model="search" clearable></el-input>
          <el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
          <span style="margin-left:20px;margin-right: 20px">选择种类</span>
          <el-select v-model="type"  clearable placeholder="请选择"  @change="choiceType">
            <el-option

                v-for="item in typelist"
                :key="item"
                :label="item"
                :value="item"
            >
            </el-option>
          </el-select>
        </div>

        <el-table :data="tableData" stripe style="width: 100%">
          <!--      <el-table-column prop="id" label="ID" sortable></el-table-column>-->



          <el-table-column  label="图片">

            <template #default="scope">
              <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.cover"
                  :preview-src-list="[scope.row.cover]">
              </el-image>

            </template>
          </el-table-column>
          <el-table-column prop="type" label="类别"></el-table-column>
          <el-table-column prop="goodsname" label="酒水名字"></el-table-column>
          <el-table-column prop="days" label="剩余到期天数(负数为已过期天数)"></el-table-column>
          <el-table-column prop="stock" label="库存/瓶"></el-table-column>

        </el-table>
        <div style="margin: 10px 0">
          <div class="block">

            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>



          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="临期商品" name="second">
        <!--    搜索区域-->
        <div style="margin: 10px 0">
          <el-input placeholder="请输入关键字" style="width: 20%" v-model="search" clearable></el-input>
          <el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
          <span style="margin-left:20px;margin-right: 20px">选择种类</span>
          <el-select v-model="type"  clearable placeholder="请选择"  @change="choiceType">
            <el-option

                v-for="item in typelist"
                :key="item"
                :label="item"
                :value="item"
            >
            </el-option>
          </el-select>
        </div>

        <el-table :data="tableData1" stripe style="width: 100%">
          <!--      <el-table-column prop="id" label="ID" sortable></el-table-column>-->



          <el-table-column  label="图片">

            <template #default="scope">
              <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.cover"
                  :preview-src-list="[scope.row.cover]">
              </el-image>

            </template>
          </el-table-column>
          <el-table-column prop="type" label="类别"></el-table-column>
          <el-table-column prop="goodsname" label="酒水名字"></el-table-column>
          <el-table-column prop="expirationTime" label="到期时间"></el-table-column>
          <el-table-column prop="days" label="剩余到期天数"></el-table-column>
          <el-table-column prop="stock" label="库存/瓶"></el-table-column>
          <el-table-column v-if="true" fixed="right" label="说明" width="100">
            <template #default="scope">
              <i class="el-icon-warning" :style="{color:'red'}"></i>
              <span> 到期时间小于30天</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 10px 0">
          <div class="block">

            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>



          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane label="已过期商品" name="three">
        <!--    搜索区域-->
        <div style="margin: 10px 0">
          <el-input placeholder="请输入关键字" style="width: 20%" v-model="search" clearable></el-input>
          <el-button type="primary" style="margin-left: 5px" @click="load">搜索</el-button>
          <span style="margin-left:20px;margin-right: 20px">选择种类</span>
          <el-select v-model="type"  clearable placeholder="请选择"  @change="choiceType">
            <el-option

                v-for="item in typelist"
                :key="item"
                :label="item"
                :value="item"
            >
            </el-option>
          </el-select>
        </div>

        <el-table :data="tableData2" stripe style="width: 100%">
          <!--      <el-table-column prop="id" label="ID" sortable></el-table-column>-->



          <el-table-column  label="图片">

            <template #default="scope">
              <el-image
                  style="width: 100px; height: 100px"
                  :src="scope.row.cover"
                  :preview-src-list="[scope.row.cover]">
              </el-image>

            </template>
          </el-table-column>
          <el-table-column prop="type" label="类别"></el-table-column>
          <el-table-column prop="goodsname" label="酒水名字"></el-table-column>
          <el-table-column prop="expirationTime" label="到期时间"></el-table-column>
          <el-table-column prop="days" label="已过期天数"></el-table-column>
          <el-table-column prop="stock" label="库存/瓶"></el-table-column>
          <el-table-column v-if="true" fixed="right" label="说明" width="100">
            <template #default="scope">
              <i class="el-icon-warning" :style="{color:'red'}"></i>
              <span> 商品已过期请及时处理</span>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin: 10px 0">
          <div class="block">

            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>



          </div>
        </div>
      </el-tab-pane>


    </el-tabs>



  </div>
</template>

<script>


import request from "../../utils/request";

export default {
  name: 'TemporaryManage',

  components: {},
  data() {
    return {
      typelist:[],
      form: {},
      dialogVisible: false,
      search: '',
      currentPage: 1,
      pageSize:10,
      total: 0,
      tableData: [],
      total1: 0,
      tableData1: [],
      total2: 0,
      tableData2: [],

      activeName:"first"
    }
  },
  created(){
    this.load()
    request.get("/wineType/selectTypelist").then(res=>{

      res.data.forEach(v=>[

        this.typelist.push(v.wineType)
      ])


    })
    // this.load1(),
    // this.load2()


  },
  methods: {
    choiceType(){
     this.tableData1=[]
      this.tableData2=[]
      console.log(this.type)

      request.get("/wine/selectStock3",{
        params:{
          type:this.type,
          pageNum:this.currentPage,
          pageSize:this.pageSize,
          search:this.search}
      }).then(res =>{

        res.data.records.forEach(v=>{

          if (v.days<30&&v.days>0) {
            this.tableData1.push(v)
          }else if(v.days<=0){
            this.tableData2.push(v)
          }

        })
        this.tableData = res.data.records
        this.total = res.data.total
      })

    },


    load(){

      request.get("/wine/selectStock3",{
        params:{
          pageNum:this.currentPage,
          pageSize:this.pageSize,
          search:this.search}
      }).then(res =>{

        res.data.records.forEach(v=>{

          if (v.days<30&&v.days>0) {
            this.tableData1.push(v)
          }else if(v.days<=0){
            this.tableData2.push(v)
          }

        })
        this.tableData = res.data.records
        this.total = res.data.total
      })
    },

    add() {
      this.dialogVisible = true
      this.form = {}

      this.$refs['upload'].clearFiles() //清除历史上传文件

    },
    fileSuccessUpload(res){
      console.log(res)
      this.form.cover = res.data

    },
    save(){
      if(this.form.id){
        //更新
        request.put("/wine/update",this.form).then(res =>{
          console.log(res)
          if(res.code ==='0'){
            this.$messageBox({

              type:"success",
              message:"更新成功"
            })
          }else {
            this.$messageBox({

              type:"error",
              message:res.msg
            })
          }
          this.load()//刷新表格数据
          this.dialogVisible = false //关闭弹窗

        })

      }else {//添加
        request.post("/wine/add",this.form).then(res => {
          console.log(res)
          if(res.code ==='0'){
            this.$messageBox({

              type:"success",
              message:"添加成功"
            })
          }else {
            this.$messageBox({

              type:"error",
              message:res.msg
            })
          }
          this.load()//刷新表格数据
          this.dialogVisible = false   //关闭弹窗
        })
      }


    },

    handleDelete(id){
      console.log(id)

      request.delete("/wine/" + id ,this.form).then(res =>{
            if( res.code ==='0'){

              this.$messageBox({

                type:"success",
                message:"删除成功"
              })

            }else {
              this.$messageBox({

                type:"error",
                message:res.msg
              })

            }
            this.load()
          }
      )


    },
    handleEdit(row) {
      this.form = JSON.parse(JSON.stringify((row)))
      this.dialogVisible=true
      this.$nextTick(() =>{
        this.$refs['upload'].clearFiles() //清除历史上传文件

      } )

    }, handleSizeChange( pageSize) { //改变页面显示信息个数
      this.pageSize = pageSize
      this.load()

    }, handleCurrentChange(pageNum) { //改变当前页
      this.currentPage = pageNum
      this.load()
    },


  }
}
</script>
